<template>
  <div class="hello">
    <ul @scroll="scrollDown">
      <li v-for="(item,index) in items">{{item}}</li>
    </ul>
  </div>
</template>

<script>
  var loading=false;
  var btCount=0;
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      items:10,
      page:1,
      pages:2
    }
  }
  ,methods:{
    scrollDown(e){
      let sh=e.target.scrollHeight;
      let st=e.target.scrollTop;
      let ch=e.target.clientHeight;
      var self=this;
      // console.log(ch+"：可视高度即容器高度")      
      if(st===0){
        console.log("%c 顶部！", "color:red;padding:30px 300px;line-height:1.5px;background:url('http://aloneboy.xyz/image/hare.gif') right center no-repeat;background-size:50px 50px");
      }else if(sh-(st+ch)===0){
        if(!loading){
          if(self.pages>=self.page){     
              loading=true;
                self.$Spin.show({
                    render: (h) => {
                        return h('div', [
                            h('Icon', {
                                'class': 'demo-spin-icon-load',
                                props: {
                                    type: 'ios-loading',
                                    size: 18
                                }
                            }),
                            h('div', 'Loading')
                        ])
                    }
                });
              setTimeout(function(){
                self.items+=10
                self.page++
                loading=false
                self.$Spin.hide();
              },3000)
          }else{
              this.$Message.destroy()
              btCount++
              if(btCount>3){
                if(btCount<7){
                  this.$Message.error("有完没完，说了没数据！")
                }else{
                           console.log("%c 底部！", "color:green;padding:30px 300px;line-height:1.5px;background:url('http://aloneboy.xyz/image/hare.gif') no-repeat;background-size:50px 50px");  
                }
              }else{
                this.$Message.info({
                    top: 50,
                    duration: 3,
                    content:'没有更多数据！！'
                });                
              }

              return false;
          }
        }else{
          console.log('%c IS loading','padding:30px 300px;background:url(https://images0.cnblogs.com/blog/431064/201402/072156353445447.gif);background-size:cover')
        }

      }
      // console.log("---------------------------------------")
    }
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  width: 300px;
  height: 300px;
  overflow-y: auto;
  list-style-type: none;
  padding: 0;
  margin: 150px auto;
  border:1px solid #ccc;
}
li {
  height: 50px;
  border-bottom:1px solid #eaeaea;
}
a {
  color: #42b983;
}
</style>

